@color-1:cornflowerblue;
@color-2:mistyrose;
@color-3:gold;
@color-4:tomato;
@color-5:chocolate;
@color-6:lightgreen;

body{
  background: #000;
  font-family: 'avenir Next','sans-serif';
  width: 100%;
}

.container{
  position: relative;
  transition: all .3s ease;
  padding: 40px 0;
}

div[class*='card-container-']{
  position: relative;
  margin:40px auto;
  width: 200px;
  height: 200px;
  //margin: 40px;
  perspective: 500px;
}

.card h1{
  font-size: 2em;
  font-weight: 600;
  padding: 1em 0 0 1em;
}

.card-container-1{
  cursor: pointer; cursor: hand;
  color: lighten(@color-1,20%);
  .card{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .2s ease;
    border-radius: 2px;
  }
  .card:last-of-type{
    background-color: multiply(@color-1,rgba(0,0,0,.5));
    z-index: 80;
  }
  .card:nth-last-of-type(2){
    background-color: multiply(@color-1,rgba(0,0,0,.25));
    z-index: 90;
  }
  .card:first-of-type{
    background-color: @color-1;
    z-index: 100;
  }
  &:hover{
    .card:first-of-type{
      transform:
        rotateX(-20deg)
        translateZ(0px);
    }
    .card:nth-last-of-type(2){
      transform:
        rotateX(-20deg)
        translateZ(-100px);
    }
    .card:last-of-type{
      transform:
        rotateX(-20deg)
        translateZ(-200px);
    }
  }
}


.card-container-2{
  cursor: pointer; cursor: hand;
  color: darken(@color-2, 20%);
  .controller{
    position: absolute;
    z-index: 200;
    top:0;
    width: 50%;
    height: 100%;
    background: none;
    &.left{left:0};
    &.right{right:0};
  }
  .card{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .3s ease;
    border-radius: 2px;
    background-color: @color-2;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.2);
    z-index: 90;
    opacity:.9;
  }
  .card:first-of-type{
    z-index: 100;
    opacity: 1;
  }
  .card:nth-of-type(n+2){
    transform:scale(.8);
  }
  &:hover{
    .card:first-of-type{
      transform:
        scale(.9);
      transform-origin: center;
    }
    .card:nth-last-of-type(2){
      transform:
        scale(.8)
        rotate(-5deg)
        translateY(-20px);
      transform-origin: bottom left;
    }
    .card:last-of-type{
      transform:
        scale(.8)
        rotate(5deg)
        translateY(-20px);
      transform-origin: bottom right;
    }
  }
}

.card-container-3{
  color: darken(@color-3, 20%);
  .controller{
    cursor: pointer; cursor: hand;
    position: absolute;
    z-index: 200;
    top:0;
    width: 30%;
    height: 100%;
    background: none;
    &.left{left:0};
    &.right{right:0};
  }
  .card{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .3s ease;
    border-radius: 2px;
    background-color: @color-3;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.2);
  }
  .card:first-of-type{
    z-index: 100;
  }
  .card:nth-of-type(2){
    z-index: 90;
  }
  .card:last-of-type{
    z-index: 80;
  }
  .right:hover ~ .card:first-of-type{
      transform:
        rotateY(20deg)
        translateZ(0px);
    }
  .right:hover ~ .card:nth-last-of-type(2){
      transform:
        rotateY(20deg)
        translateZ(-100px);
    }
  .right:hover ~ .card:last-of-type{
      transform:
        rotateY(20deg)
        translateZ(-200px);
    }
  .left:hover ~ .card:first-of-type{
      transform:
        rotateY(-20deg)
        translateZ(0px);
    }
  .left:hover ~ .card:nth-last-of-type(2){
      transform:
        rotateY(-20deg)
        translateZ(-100px);
    }
  .left:hover ~ .card:last-of-type{
      transform:
        rotateY(-20deg)
        translateZ(-200px);
    }
}

.card-container-4{
  color: lighten(@color-4,20%);
  .card{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .3s ease;
    border-radius: 2px;
    background-color: @color-4;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.2);
  }
  .card:last-of-type{
    z-index: 80;
  }
  .card:nth-last-of-type(2){
    z-index: 90;
  }
  .card:first-of-type{
    z-index: 100;
  }
  &:hover{
    .card:first-of-type{
      opacity:.8;
      &:hover{top:0;}
      & ~ .card{
        cursor: pointer; cursor: hand;
      }
    }
    .first{
      transform:
        scale(.5)
        translateX(-105%);
    }
    .second{
      transform:
        scale(.5)
        translateX(0);
    }
    .third{
      transform:
        scale(.5)
        translateX(105%);
    }
    .card:hover{top:-5px;}
  }
}

.card-container-5{
  cursor: pointer; cursor: hand;
  color: darken(@color-5,20%);
  .card{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .3s ease;
    border-radius: 2px;
    background-color: @color-5;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.2);
    transform-origin: bottom left;
  }
  .card:last-of-type{
    z-index: 80;
  }
  .card:nth-last-of-type(2){
    z-index: 90;
  }
  .card:first-of-type{
    z-index: 100;
  }
  &:hover{
    .card{
      border-bottom-left-radius: 10px;
    }
    .card:first-of-type{
      transform:
        rotate(-10deg);
    }
    .card:nth-of-type(2){
      transform:
        rotate(-5deg);
    }
    .card:last-of-type{
      transform:
        rotate(0deg);
    }
  }
}

.card-container-6{
  color: darken(@color-6,30%);
  .card{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .3s ease;
    border-radius: 2px;
    background-color: @color-6;
    box-shadow: 0 2px 8px 0 rgba(0,0,0,.2);
  }
  .card:last-of-type{
    z-index: 80;
    transform:scale(.45);
    transform-origin: bottom center;
  }
  .card:nth-last-of-type(2){
    z-index: 90;
    transform:scale(.45);
    transform-origin: bottom center;
  }
  .card:first-of-type{
    z-index: 100;
    transform-origin: top center;
  }
  &:hover{
    .card:first-of-type{
      transform:
        scale(.8)
        translateY(-21px);
    }
    .card:nth-of-type(2){
      cursor: hand; cursor: pointer;
      transform:
        scale(.38)
        translate(-55%,35%);
    }
    .card:last-of-type{
      cursor: hand; cursor: pointer;
      transform:
        scale(.38)
        translate(55%,35%);
    }
  }
}